<template>
  <van-nav-bar
    :title="calcTitle"
    right-text="菜单"
    @click-right="show = true"
  />
  <Popup
    v-model:show="show"
    position="left"
    :style="{ height: '100%', width: '50%' }"
  >
    <div
      class="route-line"
      v-for="route in viewsRoutes"
      :key="route.path"
      :class="_route.path === route.path ? 'act' : ''"
      @click="routerTo(route.path)"
    >
      {{ route.name }}
    </div>
  </Popup>
  <router-view></router-view>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { viewsRoutes } from '@/router';
  import { Popup } from 'vant';
  import { useRoute, useRouter } from 'vue-router';
  const [_route, _router] = [useRoute(), useRouter()];
  const show = ref(false);

  const routerTo = (path: string) => {
    _router.push(path);
    show.value = false;
  };

  const calcTitle = computed<string>(() => {
    return _route.name ? (_route.name as string) : '';
  });
</script>

<style lang="less" scoped>
  .route-line {
    padding: 0.2rem 0.4rem;
    font-size: 0.4rem;
  }
  .route-line.act {
    background: var(--theme);
    color: white;
  }
</style>
